let html = document.querySelector("#html");
let style = document.querySelector("#style");

let string = `
/* 你好，我叫小郭
 * 是工作时长两年半的前端打工仔。
 * 首先我要准备一个div
*/
#div1{
  border: 1px solid red;
  width: 200px;
  height: 200px
}
/* 接下来我把 div 变成一个八卦图
 * 注意看好了
 * 首先，把 div 变成一个圆
*/
#div1{
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
  border: none;
}
/* 八卦是阴阳形成的
 * 一黑一白
*/
#div1{
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%,
  rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
}
/* 加两个神秘的小球 */
#div1::before{
  top: 0;
  background: #000;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%,
  rgba(255,255,255,1) 25%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 100%);
}
#div1::after{
  bottom: 0;
  background: #fff;
  background: radial-gradient(circle, rgba(0,0,0,1) 0%,
  rgba(0,0,0,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%, 
  rgba(0,0,0,1) 100%);
}
`;
let string2 = "";
let n = 0;

let step = () => {
  setTimeout(() => {
    if (string[n] === "\n") {
      string2 = string2 + "<br>";
    } else if (string[n] === " ") {
      string2 = string2 + "&nbsp";
    } else {
      string2 = string2 + string[n];
    }
    html.innerHTML = string2;
    style.innerHTML = string.substring(0, n);
    window.scrollTo(0, 9999);
    html.scrollTo(0, 9999);

    if (n < string.length - 1) {
      n = n + 1;
      step();
    } else {
    }
  }, 25);
};

step();
